<template>
  <div style="margin-left:20px;">
      <el-row>
          <el-col :span="12">
    <el-input type="text" placeholder="请输入标题" v-model="title" maxlength="10" show-word-limit   ></el-input>
          </el-col>
           <el-col :span="12">
     <el-input type="text" placeholder="请输入类别" v-model="label" maxlength="10" show-word-limit ></el-input>
           </el-col>
      </el-row>
    <div style="margin: 20px 0;"></div>
    <el-input type="textarea" placeholder="请输入摘要" v-model="content" maxlength="30" show-word-limit></el-input>
    <div style="margin: 20px 0;"></div>
    <mavon-editor
    style="z-index:1"
      v-model="value"
      :ishljs="true"
      placeholder="来篇博客，记录点滴"
      ref="editor"
      @change="updateDoc"
      @save="saveDoc"
    />
 <div style="height:20px"></div>
      <el-upload
      ref='upload'
      :auto-upload='false' 
      :file-list="fileList" 
      :multiple='false'
      :limit="1"
      :on-exceed="handleExceed"
      :http-request="uploadFiles" 
      accept="image/jpeg,image/gif,image/png"
      action=''
      :on-change='changeUpload'           
      >
    <el-button slot="trigger" size="mini" type="primary">选取图片</el-button>
    <span>&nbsp;</span>
    <el-button @click='uploadFiles' size="mini" type="primary">转码</el-button>
 </el-upload>    
  </div>
</template>
<script>
export default {
  data() {
    return {
     title:"",
      content: "",
      label:"",
      imgFile:""
    };
  },
  methods: {
    updateDoc(markdown, html) {

    },
    saveDoc(markdown, html) {
      // 此时会自动将 markdown 和 html 传递到这个方法中

      let title = this.title
      let content = this.content
      let label = this.label
      let  imgFile = this.imgFile

      
      this.$http.post("/api/blog/new",{
          title,
          content,
          label,
          html,
          author:"欢乐涌动",
          imgFile,
          markdown
      }).then((res) =>{

          console.log(res.body)

        if(res.body.erron == -1){
         alert("请先登录");
         return
        }
         if(res.body.erron == 0){
          alert("新建博客成功");
          this.$router.push({
					name: 'manage'	
				});

        }

      })

    },
    uploadFiles(){
 var That=this;
      let file=this.$refs.upload.$refs['upload-inner'].$refs.input; //获取文件数据
      let fileList=file.files;      
      var imgFile;
      let reader = new FileReader();     //html5读文件
      reader.readAsDataURL(fileList[0]); //转BASE64       
      reader.onload=function(e) {        //读取完毕后调用接口
        imgFile = e.target.result;
        That.imgFile = imgFile;
      };   
    }
  }
};
</script>
<style lang="css">
</style>